<template>
  <div class="h-full">
    <fs-crud ref="crudRef" v-bind="crudBinding"></fs-crud>
  </div>
</template>

<script lang="ts" setup>
import { onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { useFs, dict } from '@fast-crud/fast-crud';
import dayjs from 'dayjs';
import createCrudOptions from './crud';

const router = useRouter();

const apiPrefix = '/version';
const context: any = {
  router,
  apiPrefix,
  columns: {
    versionNo: {
      title: '版本号',
      type: 'text',
      column: {
        width: 300,
        fixed: 'left'
      },
      search: { show: true }
    },
    releaseTime: {
      title: '发布时间',
      type: 'datetime',
      // naive 默认仅支持数字类型时间戳作为日期输入与输出
      // 字符串类型的时间需要转换格式
      valueBuilder(context) {
        const { value, row, key } = context;
        if (value) {
          // naive 默认仅支持时间戳作为日期输入与输出
          row[key] = dayjs(value).valueOf();
        }
      },
      valueResolve(context) {
        const { value, form, key } = context;
        if (value) {
          form[key] = dayjs(value).format('YYYY-MM-DD HH:mm:ss');
        }
      }
    },
    content: {
      title: '备注',
      type: 'textarea'
    },
    downloadUrl: {
      title: '远程地址',
      type: 'text',
      column: {
        show: false
      }
    },
    uploadUrl: {
      title: '文件上传',
      type: 'file-uploader',
      column: {
        show: false
      },
      form: {
        component: {
          max: 1
        }
      }
    },
    isForce: {
      title: '是否强制',
      type: 'dict-switch',
      form: {
        value: false
      },
      dict: dict({
        data: [
          { value: true, label: '是', color: 'success' },
          { value: false, label: '否', color: 'warning' }
        ]
      })
    }
  }
};

const { crudRef, crudBinding, crudExpose } = useFs({
  createCrudOptions,
  context
});

onMounted(() => {
  crudExpose.doRefresh();
});
</script>
